<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<title>Black Gold.QQ</title>
		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		
		
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_470742_awyw88lh8rveipb9.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		
				 <div class="page-group">
		<!-- 单个page ,第一个.page默认被展示-->
			        <div class="page page-current" id='router1'>
		 <!-- 标题栏 -->
			            <header class="bar bar-nav" id="blank">
			                <a class="icon icon-me pull-left open-panel myselfimg"><img src="image/mian.jpg"/></a>
			                <!--<a class="pull-left  myselfimg"><img src="image/mian.jpg"/></a>-->
			                <h1 class="title">消息</h1>
			                <a class="iconfont icon-anonymous-iconfont pull-right" id="add"></a>
			            </header>
			
			<!--下拉框-->
						
						<div class="add-info">
							<div class="iconfont icon-arrUp-fill sanjiao"></div>
							<div class="dropdown">
								<ul>
									<li><span class="iconfont icon-chuangjianqunliao chat"></span> &nbsp;<span>创建群聊</span></li>
									<li><span class="iconfont icon-jiahaoyou chat"></span> &nbsp;<span>加好友/群</span></li>
									<li><span class="iconfont icon-scan chat"></span> &nbsp;<span>扫一扫</span></li>
									<li><span class="iconfont icon-mianduimiankuaichuan chat"></span> &nbsp;<span>面对面快传</span></li>
									<li><span class="iconfont icon-fukuan chat"></span> &nbsp;<span>付款</span></li>
									<li><span class="iconfont icon-paishe chat"></span> &nbsp;<span>拍摄</span></li>
									<li class="dianposit"><span class="iconfont icon-hongbao chat"></span> &nbsp;<span>面对面红包</span><span class="dian1"></span></li>
									
								</ul>
							</div>
						</div>
						
			<!--搜索栏-->
						
						<div class="bar bar-header-secondary">
							  <div class="searchbar">
								    <div class="search-input">
								      <label class="icon icon-search" for="search"></label>
								      <input type="search" id='search' placeholder='搜索'/>
								    </div>
							  </div>
						</div>
			
			
			<!-- 工具栏 -->
			            <nav class="bar bar-tab">
			                <a class="tab-item  active" id="one" href="#router1">
			                    <!--<span class="icon icon-home"></span>-->
			                    <p class="iconfont icon-xiaoxi new"></p>
			                    <p class="tab-label1">消息</p>
			                    <span class="red1">99+</span>
			                </a>
			                <a class="tab-item " id="two" href="#router2">
			                    <p class="iconfont icon-11 men"></p>
			                    <p class="tab-label">联系人</p>
			                    <!--<a href="lineperson"></a>-->
			                </a>
			                <a class="tab-item " id="three" href="#router3">
			                    <p class="iconfont icon-xing star"></p>
			                    <p class="tab-label dong">动态<span class="dian2"></span></p>
			                </a>
			            </nav>
			
			<!-- 这里是页面内容区 -->
			            <div class="content ">
			                	<!--对话列表-->
								 <div class="list-block media-list">
								    <ul class="block-one">
								      <li>
								        <div class="item-content">
								          <div class="item-media"><img src="image/615607505-1e2c28bcf1a070ed.jpg"></div>
								          <div class="item-inner">
								            <div class="item-title-row">
								              <div class="item-title">WQ1701</div>
								            </div>
								            <div class="item-subtitle">朴东浩：[图片]</div>
								            <div class="chat-time">15:21</div>
								            <div class="red">99+</div>
								          </div>
								        </div>
								      </li>
								    </ul>
								    <!---->
								    <ul>
								      <li>
								        <div class="item-content">
								          <div class="item-media"><img src="image/278229256BB868FA842F5DA8B8B8CECD.jpg"></div>
								          <div class="item-inner">
								            <div class="item-title-row">
								              <div class="item-title">老王</div>
								            </div>
								            <div class="item-subtitle">菜鸟终将成为大神！</div>
								            <div class="chat-time">8:00</div>
								            <div class="red">3</div>
								          </div>
								        </div>
								      </li>
								    </ul>
								  <!---->
								    <ul>
								      <li>
								        <div class="item-content">
								          <div class="item-media"><img src="image/63F33186EACDFE6E5FBB169273F056B9.jpg"></div>
								          <div class="item-inner">
								            <div class="item-title-row">
								              <div class="item-title">朴哥</div>
								            </div>
								            <div class="item-subtitle">我要炖小肥羊！！</div>
								            <div class="chat-time">03:21</div>
								          </div>
								        </div>
								      </li>
								    </ul>
								  <!---->
								    
								  <ul>
								      <li>
								        <div class="item-content">
								          <div class="item-media"><img src="image/BA522C6CAF5964BB869EE120340ED36A.jpg"></div>
								          <div class="item-inner">
								            <div class="item-title-row">
								              <div class="item-title">小肥羊</div>
								            </div>
								            <div class="item-subtitle">这年头，羊不好做，都不敢轻易出门混社会的~</div>
								            <div class="chat-time">00:00</div>
								          </div>
								        </div>
								      </li>
								    </ul>
								  <!---->
								  <ul>
								      <li>
								        <div class="item-content">
								          <div class="item-media"><img src="image/B1FF54AC8E503EDE99C04BCB8A200884.jpg"></div>
								          <div class="item-inner">
								            <div class="item-title-row">
								              <div class="item-title">王喆</div>
								            </div>
								            <div class="item-subtitle">海哥是最棒的！</div>
								            <div class="chat-time">15:00</div>
								            <div class="red">1</div>
								          </div>
								        </div>
								      </li>
								    </ul>
								  <!---->
								  <ul>
								      <li>
								        <div class="item-content">
								          <div class="item-media"><img src="image/9E42C8CBAF915C94D4FE04BA7B44D686.jpg"></div>
								          <div class="item-inner">
								            <div class="item-title-row">
								              <div class="item-title">功希</div>
								            </div>
								            <div class="item-subtitle">不要放弃~~</div>
								            <div class="chat-time">00:21</div>
								          </div>
								        </div>
								      </li>
								    </ul>
								  <!---->
								  <ul>
								      <li>
								        <div class="item-content">
								          <div class="item-media"><img src="image/B006C35362D4A4386B7FFDFF0C26C726.jpg"></div>
								          <div class="item-inner">
								            <div class="item-title-row">
								              <div class="item-title">黎国华</div>
								            </div>
								            <div class="item-subtitle">这道题我有点不太理解哦~求赐教</div>
								            <div class="chat-time">15:21</div>
								            <div class="red">8</div>
								          </div>
								        </div>
								      </li>
								    </ul>
								  <!---->
								  <ul>
								      <li>
								        <div class="item-content">
								          <div class="item-media"><img src="image/6532307A445B2327CE5F783F2A70F24C.jpg"></div>
								          <div class="item-inner">
								            <div class="item-title-row">
								              <div class="item-title">海哥</div>
								            </div>
								            <div class="item-subtitle">我作业都做完了，但是我什么都不会，别问...</div>
								            <div class="chat-time">20:21</div>
								          </div>
								        </div>
								      </li>
								    </ul>
								  <!---->
								  <ul>
								      <li>
								        <div class="item-content">
								          <div class="item-media"><img src="image/5BBC0CC5BD419DDEDDA5B4F7720DCFBC.jpg"></div>
								          <div class="item-inner">
								            <div class="item-title-row">
								              <div class="item-title">汪鑫平</div>
								            </div>
								            <div class="item-subtitle">这道题好简单的，肯定做的完</div>
								            <div class="chat-time">17:21</div>
								          </div>
								        </div>
								      </li>
								    </ul>
								  <!---->
									  <ul>
									      <li>
									        <div class="item-content">
									          <div class="item-media"><img src="image/151547017-eb397ba658161a9.jpg"></div>
									          <div class="item-inner">
									            <div class="item-title-row">
									              <div class="item-title">文学院</div>
									            </div>
									            <div class="item-subtitle">悠然：关关雎鸠，在河之洲。</div>
									            <div class="chat-time">8:20</div>
									          </div>
									        </div>
									      </li>
									    </ul>
									  <!---->
									  <ul>
									      <li>
									        <div class="item-content">
									          <div class="item-media"><img src="image/2713240742a773a45df9271e7.jpg"></div>
									          <div class="item-inner">
									            <div class="item-title-row">
									              <div class="item-title">女神</div>
									            </div>
									            <div class="item-subtitle">会飞的猪：这家饭好好吃~~</div>
									            <div class="chat-time">23:40</div>
									            <div class="red">30</div>
									          </div>
									        </div>
									      </li>
									    </ul>
									  <!---->
									  <ul>
									      <li>
									        <div class="item-content">
									          <div class="item-media"><img src="image/365177553-11029c0cfbea730.jpg"></div>
									          <div class="item-inner">
									            <div class="item-title-row">
									              <div class="item-title">班级消息发布</div>
									            </div>
									            <div class="item-subtitle">班长：大家都是最棒的！！</div>
									            <div class="chat-time">15:00</div>
									            <div class="red">1</div>
									          </div>
									        </div>
									      </li>
									    </ul>
									  <!---->
									  <ul class="last-block">
									      <li>
									        <div class="item-content">
									          <div class="item-media"><img src="image/mian.jpg"></div>
									          <div class="item-inner">
									            <div class="item-title-row">
									              <div class="item-title">MissZhu</div>
									            </div>
									            <div class="item-subtitle">盖世英雄。</div>
									            <div class="chat-time">00:21</div>
									          </div>
									        </div>
									      </li>
									    </ul>
									  <!---->
								  </div>

			            </div>
			            
					</div>
					<!--第一个结束-->
					
					
	<!-- 第二个页面（联系人）	-->	
				 	 <div class="page" id='router2'>
				 	 	<header class="bar bar-nav" id="blank">
			                <a class="icon icon-me pull-left open-panel myselfimg"><img src="image/mian.jpg"/></a>
			                <h1 class="title">联系人</h1>
			                <h1 class="title" id="add-title">添加</h1>
			            </header>
			            <!--搜索栏-->
				 	 	<div class="bar bar-header-secondary">
							  <div class="searchbar">
								    <div class="search-input">
								      <label class="icon icon-search" for="search"></label>
								      <input type="search" id='search' placeholder='搜索'/>
								    </div>
							  </div>
						</div>
						<!--新朋友-->
						<div class="list-block media-list down">
							    <ul class="down">
							      <li>
							        <a href="#" class="item-link item-content">
							          <div class="item-inner">
							            <div class="item-text">新朋友</div>
							          </div>
							        </a>
							      </li>
							    </ul>
						</div>
						<!--好友list-->
						<div class="content content-good">
						  <div class="list-block contacts-block list-downline">
						    <div class="list-group content-group">
						      <ul>
						        <li class="list-group-title list-a">
					        		<div class="list-a cf">
					        			<a href="#">好友</a>
						        		<a href="#">群</a>
						        		<a href="#">多人聊天</a>
						        		<a href="#">设备</a>
						        		<a href="#">通讯录</a>
					        		</div>
					        		<div class="line-one"></div>
					        		
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>特别关注</span>
						              	<p>4/4</p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>一壶浊酒</span>
						              	<p>3/6</p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>一群朋友</span>
						              	<p>15/21</p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>一曲高歌</span>
						              	<p>22/33</p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>一阵清风</span>
						              	<p>18/21</p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>三俩友人</span>
						              	<p>5/5</p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>七八老酒</span>
						              	<p>19/21</p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>十村踏遍</span>
						              	<p>116/162</p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>一生还在</span>
						              	<p>2/3</p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>放荡不羁爱自由</span>
						              	<p>4/5</p>
						              </div>
						            </div>
						        </li>
						        
						        <li>
						            <div class="item-inner">
						              <div class="item-title">
						              	<span class="iconfont icon-jiantou youjian"></span>
						              	<span>其它</span>
						              	<p>4/4</p>
						              </div>
						            </div>
						        </li>
						      </ul>
							</div>
						  </div>	
						</div>	
				 	 	<!--工具栏-->
				 	 	<nav class="bar bar-tab">
			                <a class="tab-item active" id="one" href="#router1">
			                    <p class="iconfont icon-xiaoxi men"></p>
			                    <p class="tab-label">消息</p>
			                    <span class="red1">99+</span>
			                </a>
			                <a class="tab-item" id="two" href="#router2">
			                    <p class="iconfont icon-11 new"></p>
			                    <p class="tab-label1">联系人</p>
			                </a>
			                <a class="tab-item" id="three" href="#router3">
			                    <p class="iconfont icon-xing star"></p>
			                    <p class="tab-label dong">动态<span class="dian2"></span></p>
			                </a>
			            </nav>
			            
				 	 	
				 	 </div>
				 	 <!--第二个结束-->
				 	 
		<!--第三个页面开始-->
				 	 <div class="page" id='router3'>
						<header class="bar bar-nav" id="blank">
			                <a class="icon icon-me pull-left open-panel myselfimg"><img src="image/mian.jpg"/></a>
			                <h1 class="title">动态</h1>
			                <h1 class="title" id="add-title">更多</h1>
			            </header>
			            <!--搜索栏-->
				 	 	<div class="bar bar-header-secondary">
							  <div class="searchbar">
								    <div class="search-input">
								      <label class="icon icon-search" for="search"></label>
								      <input type="search" id='search' placeholder='搜索'/>
								    </div>
							  </div>
						</div>
					<!--好友动态-->
						<div class="good-friend">
							<ul class="cf">
								<li class="posit-list">
							        <span class="iconfont icon-kongjian kongjian"></span>
									<p>好友动态</p>
									<div class="myselfimg taile">
										<img src="image/01.taile.jpg"/>
									</div>
									<span class="dian3"></span>
									
								</li>
								<li>
							        <span class="iconfont icon-fujin-copy fujing"></span>
									<p>附近</p>
								</li>
								<li class="posit-list">
							        <span class="iconfont icon-xingqubula kongjian"></span>
									<p>兴趣部落</p>
									<div class="myselfimg taile">
										<img src="image/biaoqing.jpg"/>
									</div>
									<span class="dian3"></span>
								</li>
							</ul>
						</div>
						<!--内容部分-->
						
					<div class="content content-good content-last">
						  <div class="list-block contacts-block list-downline">
						    <div class="list-group content-group">
						      <ul>
						         <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-youxi02 game"></span>
						            	<span class="game-info">游戏</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						        <li class="nothing">
						            <div class="item-inner dawrap">
						              <div class="item-title game-title da">
						              	<span class="iconfont icon-zuji day"></span>
						            	<span class="game-info">日迹</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						            	
						            	<div class="myselfimg cat">
											<img src="image/278229256BB868FA842F5DA8B8B8CECD.jpg"/>
										</div>
										<span class="dian4"></span>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-kandian look"></span>
						            	<span class="game-info">看点</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-gouwu shoping"></span>
						            	<span class="game-info">京东购物</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-yuedu read"></span>
						            	<span class="game-info">阅读</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-nvhai girl"></span>
						            	<span class="game-info">动漫</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-iconfontbiaozhunmoban01 music"></span>
						            	<span class="game-info">音乐</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-zhibo zhibo"></span>
						            	<span class="game-info">直播</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-icyingyongbao48px baby"></span>
						            	<span class="game-info">应用宝</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						        
						        <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-hfenlei6 run"></span>
						            	<span class="game-info">运动</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						        <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-bingqilin ice"></span>
						            	<span class="game-info">吃喝玩乐</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						         <li>
						            <div class="item-inner">
						              <div class="item-title game-title">
						              	<span class="iconfont icon-qiqiu qiqiu"></span>
						            	<span class="game-info">同城服务</span>
						            	<p class="iconfont icon-jiantouyou youjiantou"></p>
						              </div>
						            </div>
						        </li>
						      </ul>
							</div>
						  </div>	
						</div>		
  
  
						
					<!---->
						<!--工具栏-->
				 	 	<nav class="bar bar-tab">
			                <a class="tab-item active" id="one" href="#router1">
			                    <p class="iconfont icon-xiaoxi men"></p>
			                    <p class="tab-label">消息</p>
			                    <span class="red1">99+</span>
			                </a>
			                <a class="tab-item" id="two" href="#router2">
			                    <p class="iconfont icon-11 star"></p>
			                    <p class="tab-label">联系人</p>
			                </a>
			                <a class="tab-item" id="three" href="#router3">
			                    <p class="iconfont icon-xing new"></p>
			                    <p class="tab-label1 dong">动态<span class="dian2"></span></p>
			                </a>
			            </nav>
			            
			            <!---->
					</div>
		
				<!--第三个结束-->		 	 
				 </div>
				 <!--正页面全部结束-->
			 <!--侧面栏-->
						<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
								
								 <header class="bar bar-nav" id="beside-bar">
					                <!--<a class="icon icon-me pull-left open-panel"></a>
					                <h1 class="title">标题</h1>-->
					                <div class="wrap">
										<p class="iconfont icon-erweima erweima"></p>
										  <div class="content-block">
											    <p class="head-img"><img src="image/mian.jpg"/><span class="mm">M~M</span></p>
											    <div class="picicon">
											    	<span class="iconfont icon-taiyang sun"></span>
											    	<span class="iconfont icon-taiyang sun"></span>
											    	<span class="iconfont icon-taiyang sun"></span>
											    	<span class="iconfont icon-taiyang sun"></span>
											    </div>
											    <div class="hero">盖世英雄。</div>
										  </div>
									</div>
					            </header>

								  <!-- 这里是页面内容区 -->
						         <div class="content cont">
					                	<!--侧面对话列表-->
										 <!--<div class="list-block media-list">-->
										   <ul class="ul-list">
									    		<li class="nav-icon"><span class="iconfont icon-huiyuan VIP"></span><span class="info">了解会员特权</span><span class="dian"></span></li>
									    		<li class="nav-icon"><span class="iconfont icon-iconfuzhifuzhi03 VIP"></span><span class="info">QQ钱包</span></li>
									    		<li class="nav-icon"><span class="iconfont icon-huihuaban VIP"></span><span class="info">个性装扮</span></li>
									    		<li class="nav-icon"><span class="iconfont icon-wodeshoucang VIP"></span><span class="info">我的收藏</span></li>
									    		<li class="nav-icon"><span class="iconfont icon-xiangce VIP"></span><span class="info">我的相册</span></li>
									    		<li class="nav-icon"><span class="iconfont icon-wenjianjia VIP"></span><span class="info">我的文件</span></li>
									    		<li class="nav-icon"><span class="iconfont icon-mingpian VIP"></span><span class="info">我的名片夹</span></li>
									    		<li class="nav-icon"><span class="iconfont icon-liuliang VIP"></span><span class="info">免流量特权</span></li>
									    	</ul>
										 <!--</div>-->
						            </div>
								 
								  <nav class="bar bar-tab" id="footer">
					                <a class="tab-item external active new posit" href="#">
					                    <span class="iconfont icon-APP-  shezhi"></span>
					                    <span class="tab-label1">设置</span>
					                    <span class="color"></span>
					                </a>
					                <a class="tab-item external second" href="#">
					                    <span class="iconfont icon-yueliang night"></span>
					                    <span class="tab-label right1">夜间</span>
					                </a>
					                <!--以下a为调间距-->
					                <a class="tab-item external" href="#">
					                    <span class=""></span>
					                    <span class="tab-label"></span>
					                </a>
					                 <a class="tab-item external" href="#">
					                    <span class=""></span>
					                    <span class="tab-label"></span>
					                </a>
					                <a class="tab-item external" href="#">
					                    <span class=""></span>
					                    <span class="tab-label"></span>
					                </a>
					            </nav>
								 
					</div>
						

		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="js/touch.js"></script>
		<script src="js/index.js"></script>	
			         
	</body>
</html>
